1
00:00:01,200 --> 00:00:04,090
Hello and welcome to this lecture.

2
00:00:04,270 --> 00:00:12,930
In this let's show we will be quick to the functionality for our calculator using javascript How the

3
00:00:12,930 --> 00:00:15,820
moment the calculator looks beautiful.

4
00:00:15,900 --> 00:00:18,330
But none of the key pads work.

5
00:00:18,480 --> 00:00:22,390
So we'll do that using javascript.

6
00:00:22,800 --> 00:00:24,530
All right just one good true.

7
00:00:24,540 --> 00:00:33,930
Some of the things we'll be using for this javascript session to implement the functionality for the

8
00:00:33,930 --> 00:00:34,870
calculator.

9
00:00:35,070 --> 00:00:45,080
So we'll be using the display property to display a property is used to set or return the policemen's

10
00:00:45,240 --> 00:00:46,210
display type.

11
00:00:46,230 --> 00:00:54,150
So we use the display property to display something and then next will be using the On Click event.

12
00:00:54,150 --> 00:01:04,360
The On Click event usually is used to execute any javascript function when a button is clicked.

13
00:01:04,410 --> 00:01:10,280
So a lot of the keypads fully kirkley tours are going a function of buttons.

14
00:01:10,500 --> 00:01:19,870
So when they are clicked on Click event will be activated and then some theme an event will happen.

15
00:01:20,070 --> 00:01:26,150
So the quake is used to respond to a click event.

16
00:01:26,150 --> 00:01:37,740
Max will be using also the evaluation function the eveillard function is used to evaluate or execute

17
00:01:37,870 --> 00:01:42,750
an argument so I use that to evaluate values as well.

18
00:01:42,750 --> 00:01:51,420
So for example one plus to evaluate that it gives you three will also be making use of the assignment

19
00:01:51,690 --> 00:01:56,590
operator which is the plus or equates to.

20
00:01:56,780 --> 00:02:06,150
So the assignment operator busily you use that to add value to the variable.

21
00:02:06,150 --> 00:02:13,610
Another way to express the assignment operator which is X which is a plus equals two.

22
00:02:13,710 --> 00:02:24,210
You can also express this as this or x pylos Equals to Y is the same thing as X equals 2 x plots Y.

23
00:02:24,420 --> 00:02:34,320
For example if you have a variable called X equals 210 then x bloss Equals to 5 will give you the result

24
00:02:34,410 --> 00:02:46,910
of that variable so X so plus equals to operate is the same thing as x bloss was to Y or X equals 2

25
00:02:47,010 --> 00:02:49,150
x plus why.

26
00:02:50,160 --> 00:02:53,300
I hope it makes sense if he doesn't let me know.

27
00:02:53,380 --> 00:02:56,570
I will try and explain in a bit more.

28
00:02:57,540 --> 00:03:00,210
So this is our calculator at the moment.

29
00:03:00,210 --> 00:03:07,330
If I click on any of the Keys or the buttons you can see nothing is displayed in my screen here.

30
00:03:07,570 --> 00:03:15,150
Okay this is because we've not implemented any javascript so when I start doing that now so we aren't

31
00:03:15,150 --> 00:03:20,000
going to implement the functionality inside.

32
00:03:20,010 --> 00:03:23,340
How are hastier mail document.

33
00:03:23,610 --> 00:03:27,680
So what Im going to do to each of the buttons.

34
00:03:27,780 --> 00:03:39,150
I am going to attach an on Click event so the quake event because the send button when it is click will

35
00:03:39,150 --> 00:03:42,160
display the value on that button.

36
00:03:42,170 --> 00:03:51,450
I'm going to attach another quick event in combination to use in the display property on line.

37
00:03:51,450 --> 00:04:01,200
A team of this hit him mail documents I have trashed this on Click event here and this.

38
00:04:01,230 --> 00:04:10,150
The value here is the name of the form which has a name here on the form online 16.

39
00:04:10,380 --> 00:04:20,400
So when the button is click use in the display property it would display the value which is zero here

40
00:04:20,800 --> 00:04:25,180
who displayed is value zero on the card.

41
00:04:25,200 --> 00:04:27,150
This card here is the form.

42
00:04:27,300 --> 00:04:28,430
That's what it means.

43
00:04:28,440 --> 00:04:37,470
It means when the button is kleek is a display display property to display the value which is this one

44
00:04:38,010 --> 00:04:44,640
on the form and the value is in what is next to the value of the operator.

45
00:04:44,850 --> 00:04:54,330
Plus or equal to zero sum will save this and then we're gonna to test it out.

46
00:04:54,520 --> 00:04:58,110
If that works I'm just going to copy and do the same.

47
00:04:58,110 --> 00:04:59,420
On the other Button's.

48
00:04:59,790 --> 00:05:06,740
So I've saved it finally on zero and now he should display something on the screen.

49
00:05:07,160 --> 00:05:09,510
Let me refresh.

50
00:05:09,650 --> 00:05:13,230
You can see the zero is now being implemented.

51
00:05:13,250 --> 00:05:18,500
And the other body's own work here because I've not done that so I'm going to copy and change the values

52
00:05:18,590 --> 00:05:19,920
for the order.

53
00:05:19,920 --> 00:05:29,380
KEITH So I have now implemented the javascript inside the hastier Muller document.

54
00:05:29,570 --> 00:05:36,820
So I have attached the on Click event to all the input tags.

55
00:05:37,040 --> 00:05:44,100
So the enke next to the click giving the on kleek value the same properties quickly as I've used the

56
00:05:44,100 --> 00:05:55,860
display property to display the value on the form using He pylos or equal to operator.

57
00:05:56,090 --> 00:06:03,140
And if you notice I've set the value of the plus two equals or preto to the value of the keys.

58
00:06:03,140 --> 00:06:14,850
So this is keypad 0 1 2 and then we've got the keypad plots keypad 3 4 5 key pad equals two.

59
00:06:14,990 --> 00:06:19,280
And then this is the key pad minus the same thing.

60
00:06:19,280 --> 00:06:24,470
So basically I've done the same for all of the process is the same for all of it.

61
00:06:24,530 --> 00:06:31,660
So when the bottom is click moves on Click event will trigger this action.

62
00:06:31,680 --> 00:06:42,080
It will use the display property to display the value that has been pressed on to the form display screen

63
00:06:43,730 --> 00:06:48,070
on line 32.

64
00:06:48,380 --> 00:07:00,400
I have use the on Click event and give him value of the karch which kakis in them on the form dot the

65
00:07:00,410 --> 00:07:05,080
display property dot the value equals.

66
00:07:05,090 --> 00:07:12,650
So the evaluation function because this is normally when you add two values or take away two values

67
00:07:13,170 --> 00:07:20,570
you use equal still sign you means you are you had in some being taken away in multiplying or dividing

68
00:07:21,760 --> 00:07:33,470
this valuation function is what is used to evaluate or execute what's inside that argument.

69
00:07:33,650 --> 00:07:43,110
So inside the argument we have inside the argument we have the form which is a karch DOT.

70
00:07:43,250 --> 00:07:47,290
The display property got the value.

71
00:07:47,420 --> 00:07:57,020
So these are the arguments that this equal sign we'll evaluate compute and then display a result on

72
00:07:57,020 --> 00:07:58,340
the screen.

73
00:07:58,340 --> 00:08:01,920
So that's basically the form done.

74
00:08:01,960 --> 00:08:08,530
If I saved that or the buttons on the calculator should now work.

75
00:08:08,630 --> 00:08:16,370
So let's go refresh and test.

76
00:08:16,370 --> 00:08:19,520
So try a simple addition so we can trower the key.

77
00:08:19,520 --> 00:08:23,190
So I do three plus two.

78
00:08:23,420 --> 00:08:40,210
If you see it's clear that do for take away too as to claim that I do six times seven gives me 42 A

79
00:08:40,250 --> 00:08:47,830
clear that I go for it to divide by 4.

80
00:08:48,380 --> 00:08:49,550
Give you that.

81
00:08:49,950 --> 00:09:01,050
Okay that's truth trampin Now let's try to get off the ride by to give you six.

82
00:09:01,130 --> 00:09:06,590
All right so all that needs are cut callate are done.

83
00:09:06,800 --> 00:09:08,850
Just want to highlight something online.

84
00:09:08,850 --> 00:09:13,950
33 of the code when we use the On Click event for the division.

85
00:09:14,060 --> 00:09:15,520
This is t symbol.

86
00:09:15,530 --> 00:09:16,570
So the backslash.

87
00:09:16,570 --> 00:09:21,430
Here is what javascript uses to perform a division.

88
00:09:21,440 --> 00:09:22,460
Just to let you know.

89
00:09:22,670 --> 00:09:32,440
And it uses the uses asterisks to the US so we could see on line 29 A uses the asterisks for multiplication

90
00:09:32,960 --> 00:09:38,000
and the slash for pair from mean deviation.

91
00:09:38,120 --> 00:09:42,470
So thank you so much for your time.

92
00:09:42,560 --> 00:09:47,020
I hope you have you've had fun creating your own calculator.

93
00:09:47,090 --> 00:09:55,460
Play around with the values and not apply your own touch to lick her -- to take care of the best hand.

94
00:09:55,460 --> 00:09:56,780
Bye for now.